<template>
  <div class="search">
    <input type="text" placeholder="Reno9 系列" />
    <img class="search-svg" src="@/assets/images/search.svg" alt="" />
  </div>
</template>
<script lang="ts" setup>
  // export interface IProps {
  //   title: string;
  // }
  // const props = withDefaults(defineProps<IProps>(), {
  //   title: "",
  // });
</script>

<style lang="scss" scoped>
  .search {
    height: 36px;
    width: 160px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 8px 16px;

    border-radius: 36px;
    background-color: #f6f6f6;
    cursor: pointer;
    input {
      width: 112px;
      height: 21px;
      font-size: 14px;
      opacity: 0.3;
      outline: none;
      border: none;
      background-color: transparent;
    }

    .search-svg {
      width: 14px;
      height: 14px;
    }
  }
</style>
